<template>
  <div :style="{'min-height':slide_h-100+'px'}">
    <el-row :style="{'padding-top':slide_h*0.2+'px'}">
      <el-col span="1">&nbsp;</el-col>
      <el-col span="11" >
        <div v-if="images.length>0">
          <el-carousel :interval="3500" :height="slide_h*0.55+'px'" indicator-position="outside">
            <el-carousel-item v-for="(x, index) in images" :key="index" >
              <!--<img style="height:100%" class="w-percent100"  :src="proAPI.RESOURCE_URL+x.imagePath" />-->
              <el-image style="width: 100%;height:100%"  fit="cover" :src="x.imagePath"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div else>&nbsp;</div>
      </el-col>
      <el-col span="4">&nbsp;</el-col>
      <el-col  id="loginView" span="7" >
        <el-card>
          <div slot="header" class="title18 bold"  >
            用户登录
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <el-form-item prop="userName">
              <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="请输入账号" type="text" clearable
                        v-model="ruleForm.userName" autocomplete="on">
                <template slot="prepend">账&nbsp;&nbsp;&nbsp;号</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="确认密码" type="password"
                        v-model="ruleForm.password" autocomplete="on" clearable>
                <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
              </el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary"  style="min-width:50%" @click="submitForm('ruleForm')">登&nbsp;&nbsp;&nbsp;录
              </el-button>
              <!-- <el-button @click="resetForm('ruleForm2')">重置</el-button> -->
            </el-form-item>
            <el-form-item style="text-align:right">
              <span @click="toSign()" class="cursor c-00AEEF" >立 即 注 册</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col span="1">&nbsp;</el-col>
    </el-row>
    <!--<el-row v-for="(x,index) in 20 " :key="index">{{x}}</el-row>-->
  </div>
</template>
<script type="es6">
  export default {
    inject:["changeActive"],
    data() {
      return {
        captcheurl: '',
        time: new Date().getFullYear(),
        images: [{imagePath:"/static/img/bg/bg1.jpg"},{imagePath:"/static/img/bg/bg2.jpg"},{imagePath:"/static/img/bg/bg1.jpg"}],
        ruleForm: {
          userName: '',
          password: '',
          // rand: ''
        },
        rules: {
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          rand: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        },
        slide_w:window.document.body.offsetWidth,
        slide_h:(window.document.body.offsetHeight)
      }
    },
    methods: {
      submitForm(formName) {
        var m = {
          userName: this.ruleForm.userName,
          password: this.proUtil.md5(this.proUtil.md5(this.ruleForm.password)),
          // rand: this.ruleForm.rand
        };
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.login,lock:1,text:"正在登陆....",background:"rgba(0,0,0,0.6)"});
        this.proAPI.postJson(this.proAPI.URLS.login, m).then((res) => {

          this.$store.state.CSRFToken = res.data.CSRFToken;
          localStorage.setItem(process.env.PROJECT_NAME+"CSRFToken",res.data.CSRFToken);
          this.$store.commit("saveToken", res.data.token);
          console.log(this.$store.getters.getValForKey("beforeLoginUrl"));
          var beforeLoginUrl = this.$store.getters.getValForKey("beforeLoginUrl");
          this.proUtil.msgSuccess("登陆成功");
          if (!this.proUtil.isNull(beforeLoginUrl)) {
            localStorage.removeItem("beforeLoginUrl");
            localStorage.removeItem("beforeLoginTime");
            //计算之前存储的登录之前的页面是否小于10分钟
            if (this.proUtil.isNull(beforeLoginUrl) || (new Date().getTime() - (this.$store.getters.getValForKey("beforeLoginTime"))) > 600000) {
              console.log(1222222);
              this.$router.replace("/home");
            } else {
              console.log(233333333);
              this.$router.replace("/home");
              // this.$router.replace(beforeLoginUrl);
            }
          } else {
            this.$router.replace("/home");
          }
          this.$store.dispatch("init");
        });
      },
      changeCode() {
        this.captcheurl = process.env.BASE_API + this.proAPI.URLS.getLoginCaptcha + "?t=" + new Date().getTime()
      },
      toSign(){
        this.$router.push("/sign");
      },
      init() {
        // this.proAPI.getJson(this.proAPI.URLS.getAllMobileClientBanner).then((res) => {
        //   this.images = res.data;
        // }).catch(()=>{
        //   this.isLoading = false;
        // })
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.changeActive(1);
        this.init();
        this.changeCode();
      })
    },

  }
</script>
<style scoped lang="scss">
  #loginView{
    padding-top:20px;
    /deep/ .el-input-group__append{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff;
      padding: 0;
      border: 0;
    }
    /deep/ .el-input-group__prepend{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff;
    }
    .captcha {
      vertical-align: middle;
      min-width: 100px;
      background-color: rgba(0, 0, 0, 0.5)
    }
  }
</style>
